<template>
    <div class="topic">
        <div class="title">专题精选</div>
        <van-swipe :loop="false" width="300" :show-indicators="false">
            <van-swipe-item v-for="(item,index) in topicList" :key="index">
                <img height="200px" width="300" v-lazy="item.scene_pic_url"/>
                <h2>
                    {{ item.title }}
                    <span>{{ item.price_info }}起</span>
                </h2>
                <div>
                    {{ item.subtitle }}

                </div>
            </van-swipe-item>

        </van-swipe>
    </div>
</template>

<script>
export default {
    name: "Topic",
    props: ["topicList"],
    data() {
        return {}
    }
}
</script>

<style scoped lang="less">
.topic {
    margin-top: 20px;
    background-color: #fff;
    padding: 8px;

    .title {
        line-height: 50px;
        font-size: 20px;
        text-align: center;
    }

    .van-swipe-item {
        margin-right: 0.2rem;

        h2 {
            font-size: 18px;
            margin: 10px 0;

            span {
                color: darkred;
            }
        }
    }
}
</style>
